<template>
<div class="">
        <!-- //面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>


    <el-card>
        <el-row>
            <el-col :span="8">
                 <el-input placeholder="请输入内容">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
            </el-col>
        </el-row>


         <el-table :data="list"  border style="width: 100%">
               <el-table-column  type="index" width="50" label="#"></el-table-column>
            <el-table-column prop="order_number" label="订单编号" >
            </el-table-column>
            <el-table-column prop="order_price" label="订单价格" >
            </el-table-column>
            <el-table-column prop="order_status" label="是否付款" >
                  <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.order_status==='1'">已付款</el-tag>
                    <el-tag type="danger">未付款</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="is_send" label="是否发货" >
            </el-table-column>
            <el-table-column prop="create_time" label="下单时间" >
                  <template slot-scope="scope">
                    {{scope.row.create_time | shijian}}
                </template>
            </el-table-column>
                <el-table-column  label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogVisible=true"></el-button>    
                    <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>    
                </template>
            </el-table-column>
         </el-table>

        <!-- //分页 -->
           <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 8, 10,12]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <!-- //编辑 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span slot="footer" class="dialog-footer">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="省市区/县" prop="address1">
                      <el-cascader clearable expandTrigger="hover" v-model="ruleForm.address1" :options="zxc"
                                        :props="cateProps" @change="handleChange">
                    </el-cascader>
             </el-form-item>
            <el-form-item label="详细地址" prop="address2">
                     <el-input v-model="ruleForm.address2"></el-input>
             </el-form-item>
      </el-form>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
         </el-card>
</div>
</template>
<script>
import { getdd ,getxx,} from "@/api/api.js";
export default {
  name: "Orders",
  props: [],
  data() {
    return {
      total: 0,
      ruleForm:{
          address1:[],
          address2:''
      },
        cateProps: {
        //商品分类列表


      },
      rules:{

      },
      dialogVisible:false,//编辑显示隐藏框
      list:[],
      zxc:[],
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10
      }
    };
  },
  created() {
    //钩子函数实例创建之后
    this.xuan();
  },
  methods: {
    //方法

    xuan(){
          getxx().then(res => {
              console.log(res);
      });
    },
     handleChange() {
      // console.log(this.ruleForm.goods_cat);
      if (this.ruleForm.goods_cat.length !== 3) {
        this.ruleForm.goods_cat = [];
      }
    },
    //渲染订单数据
    async xuan() {
      const res = await getdd({
        params: this.queryInfo
      });
      if (res.meta.status === 200) {
        this.$message.success("获取订单列表数据成功");
        this.list = res.data.goods;
         this.total=res.data.total
        console.log(res.data.goods);
        // console.log(res);
      }
    },
     handleSizeChange(newsize){
     this.queryInfo.pagesize=newsize
     this.xuan()
 },
 handleCurrentChange(newnum){
      this.queryInfo.pagenum=newnum
     this.xuan()
 }
  },
  components: {
    //注册子组件
  },
  watch: {
    //监听
  }
};
</script>
<style lang="scss" scoped>
</style>